<template>
  <el-form ref="formRef" :model="user" label-width="120px">
    <el-form-item>
      <UserLoadPhoto></UserLoadPhoto>
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="user.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="user.password"></el-input>
    </el-form-item>
    <el-form-item label="角色">
      <el-select v-model="user.roleId" class="m-2" placeholder="Select">
        <el-option
            v-for="item in roles"
            :key="item.roleId"
            :label="item.roleName"
            :value="1"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="部门编号">
      <DeptNameSelect v-on:getId="getDeptId"></DeptNameSelect>
    </el-form-item>
    <el-form-item label="状态">
      <el-switch
          v-model="user.status"
          active-text="启用"
          inactive-text="停用"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="0"
          inactive-value="2"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="add()">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {addUser} from "@/api/user";
import DeptNameSelect from "@/components/dept/DeptNameSelect";
import {ElMessage} from "element-plus";
import {getAllRole} from "@/api/role";
import UserLoadPhoto from "@/components/user/UserLoadPhoto";

export default {
  name: "AddUser",
  components: {UserLoadPhoto, DeptNameSelect},
  data(){
    return{
      props:{
        label:'userName',
        value:'id'
      },
      roles:'',
      users:[],
      user:{
        username:'',
        password:'',
        creater:sessionStorage.getItem('username'),
        status:0,
        roleId:'',
        deptId:'',
      }
    }
  },
  mounted() {
    this.getRole()
  },
  methods:{
    getDeptId(data) {
      this.user.deptId = data
    },
    async getRole() {
      const rep = await getAllRole()
      this.roles = rep.data.data
    },
    async add(){
      const rep = await addUser(this.user)
      if (rep.data.code===200) {
        ElMessage({
          type:"success",
          message:"添加成功"
        })
      }
    }
  }
}
</script>

<style scoped>

</style>